<template>
	<view class="flex-colume-start indexPage">
		<view class="indexPage-imgBg">
			<image src="/static/index-bg.png" style="width: 100%; height: 100%;"></image>
		</view>
		<view class="flex-colume-start indexPage1">
			<image src="/static/logo1.png" style="width: 120px; height: 120px;"></image>
			<view class="page-title1">铁岭县多元金融纠纷调解中心</view>
			<view class="loginFormBox">
				<view
					style="margin-bottom: 25px; width: 100%; text-align: center; color: #707070; font-size: 1.17em; font-weight: bolder;">
					案件信息查询
				</view>
				<u-form :model="loginForm" ref="loginForm" label-width="0">
					<u-form-item prop="card">
						<u--input placeholderStyle="font-size:14px;color: #c0c4cc;" class="input1" border="surround"
							v-model="loginForm.card" placeholder="证件号码/社会统一信用代码">
							<template slot="prefix">
								<image src="/static/icon07.png" class="inputImg1" style=" padding: 2.2px;"></image>
							</template>
						</u--input>
					</u-form-item>
					<u-form-item prop="name">
						<u-input placeholderStyle="font-size:14px;color: #c0c4cc;" class="input1" border="surround"
							v-model="loginForm.name" placeholder="姓名">
							<template slot="prefix">
								<image src="/static/icon01.png" class="inputImg1" style=" padding: 3.5px;"></image>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="phone">
						<u-input placeholderStyle="font-size:14px;color: #c0c4cc;" class="input1" border="surround"
							v-model="loginForm.phone" placeholder="手机号码">
							<template slot="prefix">
								<image src="/static/icon05.png" class="inputImg1" style="padding: 0.5px;"></image>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="code">
						<u-input placeholderStyle="font-size:14px;color: #c0c4cc;" class="input1" style="width: 30%;"
							border="surround" v-model="loginForm.code" placeholder="短信验证码">
							<template slot="prefix">
								<image src="/static/icon03.png" class="inputImg1" style="padding: 2.5px;"></image>
							</template>
						</u-input>
						<u-code keep-running seconds="30" @change="codeChange" @end="codeEnd" @start="codeStart"
							ref="uCode"></u-code>
						<u-button :disabled="sendDisabled" loadingSize="10" @click="sendBtnClick()"
							:loading="sendLoading" loadingText="获取验证码" class="sendBtn"
							style="margin-left: 2%; width: 34%;">{{btnText}}</u-button>
					</u-form-item>
					<u-form-item>
						<u-button style="margin-top: 10px; height: 40px;" class="sendBtn" loadingSize="10"
							@click="submitBtnClick()" :loading="sureLoading" loadingText="查询">查询</u-button>
					</u-form-item>

				</u-form>
			</view>
			<view class="page-line1"></view>
			<view class="flex-colume-start readerBox">
				<view class="readerBox__header1">
					政策法规解读(被申请人必读)
				</view>

				<view class="readerBox__content1" v-if="data">

				</view>

				<view class="flex-colume-start readerBox__empty1" v-else>
					<image src="/static/index-empty.png" style="width: 100%;" mode="widthFix"></image>
					<view style="color: #909399; font-size: 14px; margin-top: 10px;">暂无数据</view>
				</view>


			</view>
			<view class="flex-colume-start page-desc1">
				<view>
					监督投诉电话:024-72275698/72827977
				</view>
				<view>监督投诉邮箱:tiaojiejiandu@163.com</view>
				<view>
					版权所有:<span>铁岭县多元金融纠纷调解中心</span>
				</view>

			</view>

		</view>


	</view>
</template>

<script>
	import {
		smsCode,
		indexQuery,
		login
	} from '@/api/api'
	export default {
		data() {
			var checkPhone = (rule, value, callback) => {
				// 手机号验证
				if (!value) {
					return callback(new Error("手机号不能为空"));
				} else {
					const reg = /^1[3456789]\d{9}$/;
					if (reg.test(value)) {
						callback();
					} else {
						return callback(new Error("请输入正确的手机号"));
					}
				}
			};
			return {
				btnText: '获取验证码',
				loginForm: {
					card: '330824199304304234', //证件号
					name: '张张', //名字
					phone: '18329031965',
					code: '123456' //验证码
				},
				loginRules: {
					card: [{
						required: true,
						message: '证件号码不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					name: [{
						required: true,
						message: '姓名不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						message: '手机号码不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, {
						validator: checkPhone,
						trigger: ["blur", "change"]
					}],
					code: [{
						required: true,
						message: '验证码不能为空',
						trigger: [],
					}]

				},
				sendLoading: false,
				sendDisabled: false,
				sureLoading: false,
				data: undefined
			}
		},
		onLoad() {
			var token = uni.getStorageSync('hqt-mix-token')
			if (!token) {
				//----模拟登录成功
				uni.setStorageSync('hqt-mix-token', '82af470ccc0b5094373c5af045a34d83')
				//---以下是微信登录的方式，记得在getWeChatCode()方法里更换公众号id
				// var code = this.getUrlCode('code');
				// if (code) {
				// 	login({
				// 		code: code
				// 	}).then(res => {
				// 		if (res.data.code == 1) {
				// 			//存储token 
				// 			uni.setStorageSync('hqt-mix-token', '82af470ccc0b5094373c5af045a34d83')
				// 			return
				// 		}
				// 		uni.showToast({
				// 			title: res.data.msg,
				// 			icon: 'none'
				// 		})

				// 	})
				// } else {
				// 	this.getWeChatCode()

				// }

			}


		},
		onReady() {
			this.$refs.loginForm.setRules(this.loginRules)
		},

		methods: {
			sendBtnClick() {
				this.$refs.loginForm.clearValidate('code')
				this.$refs.loginForm.validateField(['phone', 'card', 'name'], errorsRes => {
					if (!errorsRes || errorsRes.length == 0) {
						this.sendLoading = true
						smsCode({
							mobile: this.loginForm.phone
						}).then(res => {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							if (res.data.code == 1) {
								this.sendLoading = false
								this.sendDisabled = true
								this.$refs.uCode.start();
								return

							}



						}).catch(err => {
							this.sendLoading = false
						})

					}

				})
			},
			codeStart() {

			},
			codeChange(text) {
				this.btnText = text;
			},

			codeEnd() {
				this.sendDisabled = false
			},
			submitBtnClick() {
				this.$refs.loginForm.validate().then(res => {
					this.sureLoading = true
					var params = {
						...this.loginForm
					}
					params.number = params.card
					indexQuery(params).then(res1 => {
						this.sureLoading = false

						if (res1.data.code == 1) {
							getApp().globalData.list1 = res1.data.data

							uni.navigateTo({
								url: '/pages/caseList/caseList'
							})
							return

						}
						uni.showToast({
							title: res1.data.msg,
							icon: 'none'
						})
					}).catch(err => {
						this.sureLoading = false
					})

				}).catch(err => {

				})
			},
			// 正则匹配请求地址中的参数函数
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
				[, ''
				])[1].replace(/\+/g, '%20')) || null
			},

			// 看地址中有没有code参数,如果没有code参数的话则请求微信官方的接口并获取包含code的回调链接
			getWeChatCode() {
				var appID = 'wx9bbf9c8385393ac5'; //公众号appID
				var url0 = location.href
				var callBack = url0 + 'pages/index/index'


				//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
				window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
					appID + '&redirect_uri=' + encodeURIComponent(callBack) +
					'&response_type=code&scope=snsapi_base&state=1#wechat_redirect'
			}



		}
	}
</script>


<style lang="scss" scoped>
	.indexPage {
		.loginFormBox {
			margin-top: 50px;
			padding: 25px;
			background-color: white;
			border-radius: 6px;
			width: 80%;
			max-width: 385px;

			.input1 {
				width: 100%;
			}

			.inputImg1 {
				width: 20px;
				height: 20px;
				margin-left: -6px;
				margin-right: 4px;
			}

			.sendBtn {
				color: white;
				background-color: #409EFF;
				height: 36px;
				border-color: white;
			}
		}

		.page-line1 {
			margin-top: 24px;
			margin-bottom: 24px;
			width: calc(100% - 50px);
			height: 1px;
			background-color: #DCDFE6;
		}

		.readerBox {
			padding: 8px;
			background-color: white;
			border-radius: 6px;
			width: 80%;
			max-width: 385px;

			&__header1 {
				width: 100%;
				background-color: #409EFF;
				color: white;
				padding-left: 20px;
				font-size: 16px;
				line-height: 50px;
				text-align: left;
				opacity: 0.8;
			}

			&__empty1 {
				width: 100%;
				padding-top: 60px;
				padding-bottom: 60px;
			}
		}

	}
</style>